.card {
    margin-top: 100px;
    width: 400px;
    height: 300px;
    position: relative;
    left: 50%;
    /* 增加一个过渡效果，这是实现动画的原理 */
    transform: translate(-50%, 0);
}

.cover {
    z-index: 1;
}

.girl {
    z-index: 2;
    opacity: 0;
}

.title {
    z-index: 3;
    bottom: 0;
}

.card img {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: 0.5s;
}


.card:hover .cover {
    box-shadow: 0 35px 35px -8px rgba(0, 0, 0, 0.7);
    transform: perspective(500px) rotateX(25deg);
}

.card:hover .girl {
    opacity: 1;
    transform: perspective(500px) translate3d(0, -30px, 50px);
}

.card:hover .title {
    transform: perspective(500px) translate3d(0, -15px, 50px);
}